<template>
  <a-card>
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="用户姓名">
              <a-input v-model="queryParam.realname" placeholder="请输入用户姓名"/>
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="用户账号">
                <a-input v-model="queryParam.username" placeholder="请输入用户账号"/>
              </a-form-item>
            </a-col>
          </template>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
              <a-button type="primary" icon="reload" style="margin-left: 8px" @click="searchReset">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->


    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"/> 已选择 <a
        style="font-weight: 600"
      >{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>
      <a-table
        ref="table"
        size="middle"
        bordered
        row-key="id"
        :columns="columns"
        :data-source="dataSource"
        :pagination="pagination"
        :loading="loading"
        class="j-table-force-nowrap"
        :row-selection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange"
      >
        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"/>
        </template>

        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img
            v-else
            :src="getImgView(text)"
            height="25px"
            alt=""
            style="max-width:80px;font-size: 12px;font-style: italic;"
            @click="handlePreview(text)"
          >
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="doKickout(record)">强制退出</a>
        </span>
      </a-table>
    </div>

    <user-modal ref="modalForm" @ok="modalFormOk"/>

    <password-modal ref="passwordmodal" @ok="passwordModalOk"/>

    <a-modal :visible="previewVisible" :footer="null" @cancel="handleImgCancel()">
      <img alt="example" style="width: 100%" :src="previewImage">
    </a-modal>

  </a-card>
</template>

<script>
import { TableListMixin } from '@/mixins/TableListMixin'
import UserModal from './modules/UserModal'
import PasswordModal from './modules/PasswordModal'
import { frozenBatch } from '@/api/api'
import { getAction } from '@/api/manage'

export default {
  name: 'OnLineUser',
  components: {
    UserModal,
    PasswordModal
  },
  mixins: [TableListMixin],
  data() {
    return {
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '用户账号',
          align: 'center',
          dataIndex: 'username'
        },
        {
          title: '用户姓名',
          align: 'center',
          dataIndex: 'name'
        },
        {
          title: '头像',
          align: 'center',
          dataIndex: 'avatar',
          scopedSlots: { customRender: 'imgSlot' }
        },
        {
          title: '登陆IP',
          align: 'center',
          dataIndex: 'ip'
        },
        {
          title: '登录地址',
          align: 'center',
          dataIndex: 'ipAddr'
        },
        {
          title: '浏览器',
          align: 'center',
          dataIndex: 'browser'
        },
        {
          title: '登录时间',
          align: 'center',
          dataIndex: 'loginTime'
        },
        {
          title: '操作',
          align: 'center',
          width: '10%',
          scopedSlots: {
            customRender: 'action'
          }
        }
      ],
      url: {
        list: '/sys/user/onLineList',
        delete: '/sys/user/delete',
        deleteBatch: '/sys/user/deleteBatch',
        kickout: '/sys/user/kickout'
      }
    }
  },
  methods: {
    batchFrozen(status) {
      if (this.selectedRowKeys.length <= 0) {
        this.$message.warning('请选择一条记录！')
        return false
      } else {
        let ids = ''
        const that = this
        that.selectedRowKeys.forEach(function(val) {
          ids += val + ','
        })
        this.$confirm('是否' + (status === 1 ? '解冻' : '冻结') + '选中账号?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          frozenBatch({ ids: ids, status: status }).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.loadData()
              that.onClearSelected()
            } else {
              that.$message.warning(res.message)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消操作！'
          })
        })
      }
    },
    handleFrozen(id, status) {
      const that = this
      frozenBatch({ ids: id, status: status }).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.loadData()
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    handleChangePassword(username) {
      this.$refs.passwordmodal.show(username)
    },
    passwordModalOk() {
      // TODO 密码修改完成 不需要刷新页面，可以把datasource中的数据更新一下
    },
    doKickout(record) {
      getAction(this.url.kickout, {
        username: record.username,
        token: record.token
      }).then(res => {
        if (res.success) {
          this.loadData()
          this.$message.info(res.message)
        }
      })
    }
  }
}
</script>
